<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description"  content=""/>
<meta name="keywords" content=""/>
<meta name="robots" content="ALL,FOLLOW"/>
<meta name="Author" content="AIT"/>
<meta http-equiv="imagetoolbar" content="no"/>
<title>TERMINATOR: Content Boxes</title>

<link rel="stylesheet" href="public/css/reset.css" type="text/css"/>
<link rel="stylesheet" href="public/css/screen.css" type="text/css"/>
<link rel="stylesheet" href="public/css/fancybox.css" type="text/css"/>
<link rel="stylesheet" href="public/css/jquery.wysiwyg.css" type="text/css"/>
<link rel="stylesheet" href="public/css/jquery.ui.css" type="text/css"/>
<link rel="stylesheet" href="public/css/visualize.css" type="text/css"/>
<link rel="stylesheet" href="public/css/visualize-light.css" type="text/css"/>
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="public/css/ie7.css" />
<![endif]-->	
</head>

<body>

<div class="pagetop">
	<div class="head pagesize"> <!-- *** head layout *** -->
		<div class="head_top">
			<div class="topbuts">
				<ul class="clear">
				<li><a href="#">View Site</a></li>
				<li><a href="#">Messages</a></li>
				<li><a href="#">Settings</a></li>
				<li><a href="login.html" class="red">Logout</a></li>
				</ul>
				
				<div class="user clear">
					<img src="public/images/avatar.jpg" class="avatar" alt="" />
					<span class="user-detail">
						<span class="name">Welcome Arnold</span>
						<span class="text">Logged as admin</span>
						<span class="text">You have <a href="#">5 messages</a></span>
					</span>
				</div>
			</div>
			
			<div class="logo clear">
			<a href="index.html" title="View dashboard">
				<img src="public/images/logo_earth.png" alt="" class="picture" />
				<span class="textlogo">
					<span class="title">TERMINATOR</span>
					<span class="text">admin template</span>
				</span>
			</a>
			</div>
		</div>
		
		<div class="menu">
			<ul class="clear">
			<li><a href="index.html">Dashboard</a></li>
			<li><a href="articles.html">Articles</a></li>
			<li class="active">
				<a href="styles.html">Styles</a>
				<ul>
					<li class="active"><a href="boxes.html">Content Boxes</a></li>
					<li><a href="columns.html">Columns</a>
						<ul>
							<li><a href="columns1.html">Boxes in Columns</a></li>
							<li><a href="columns2.html">Columns in Boxes</a></li>
						</ul>
					</li>
					<li><a href="forms.html">Forms</a></li>
				</ul>				
			</li>
			<li><a href="tables.html">Tables</a></li>
			<li><a href="charts.html">Charts</a></li>
			<li><a href="gallery.html">Image Gallery</a></li>
			<li><a href="settings.html">Settings</a></li>
			</ul>
		</div>
	</div>
</div>
<div class="breadcrumb">
	<div class="bread-links pagesize">
		<ul class="clear">
		<li class="first">You are here:</li>
		<li><a href="#">Styles</a><span>&raquo;</span></li>
		<li><a href="#">Content Boxes</a></li>
		</ul>
	</div>
</div>
	
<div class="main pagesize"> <!-- *** mainpage layout *** -->
	<div class="main-wrap">
		<div class="page clear">
			<h1>Content Boxes Variations</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			
			<div class="columns clear">
				<div class="col1-3">
					<div class="content-box">
					<div class="box-body">
						<div class="box-wrap clear">
							<h2>Content Box without Header</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
						</div> <!-- end of box-wrap -->
					</div> <!-- end of box-body -->
					</div> <!-- end of content-box -->
				</div>
				<div class="col1-3">
					<div class="content-box">
					<div class="box-body">
						<div class="box-header clear">
							<h2>Content Box with Header</h2>
						</div>
						<div class="box-wrap clear">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.</p>
						</div> <!-- end of box-wrap -->
					</div> <!-- end of box-body -->
					</div> <!-- end of content-box -->
				</div>
				<div class="col1-3 lastcol">
					<div class="content-box bt-space10">
					<div class="box-body">
						<div class="box-header clear box-slide-head">
							<span class="slide-but"></span>
							<h2>Openable Content Box</h2>
						</div>
						<div class="box-wrap clear box-slide-body">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
						</div> <!-- end of box-wrap -->
					</div> <!-- end of box-body -->
					</div> <!-- end of content-box -->
					
					<div class="content-box">
					<div class="box-body">
						<div class="box-header clear box-slide-head">
							<span class="slide-but"></span>
							<h2>Closed Openable Content Box</h2>
						</div>
						<div class="box-wrap clear box-slide-body hidden">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
						</div> <!-- end of box-wrap -->
					</div> <!-- end of box-body -->
					</div> <!-- end of content-box -->
				</div>
			</div>
			
			
			<div class="content-box">
			<div class="box-body">
				<div class="box-header clear">
					<ul class="tabs clear">
						<li><a href="#tab1">Tab 1</a></li>
						<li><a href="#tab2">Tab 2</a></li>
						<li><a href="#tab3">Tab 3</a></li>
					</ul>
					<h2>Content Box Header with Tabs</h2>
				</div>
				<div class="box-wrap clear">
					<div id="tab1">
						<h3>Contents of Tab 1</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>
					<div id="tab2">
						<h3>Contents of Tab 2</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>
					<div id="tab3">
						<h3>Contents of Tab 3</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					</div>
				</div> <!-- end of box-wrap -->
			</div> <!-- end of box-body -->
			</div> <!-- end of content-box -->
			
			
			<div class="content-box">
			<div class="box-body">
				<div class="box-header clear">
					<ul class="tabs clear">
						<li><a href="#tab01">Sidebar 1/4</a></li>
						<li><a href="#tab02">Sidebar 1/3</a></li>
						<li><a href="#tab03">Sidebar 1/2</a></li>
					</ul>
					<h2>Content Box Header with Tabs and Sidebar</h2>
				</div>
				<div class="box-wrap clear">
					<div id="tab01">
					<div class="sidebar1-4 clear">
						<div class="sidebar">
							<div class="sidemenu">
								<ul class="list">
								<li><a href="#">Lorem Ipsum Dolor</a></li>
								<li class="active"><a href="#">Consectetur Adipisicing</a></li>
								<li><a href="#">Tempor Incididunt</a></li>
								<li><a href="#">Dolore Magna</a></li>
								</ul>
							</div>
							<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>						
						</div>
						<div class="col3-4">
							<div class="notification note-info">
								<a href="#" class="close" title="Close notification">close</a>
								<p><strong>Sidebar Information:</strong></p> 
								<p><small>The sidebar can be used as static sidebar without any reactions to tabs. It's up to you what will be included into the div tag that can be changed by tabs.</small></p>
							</div>
							
							<h3>Contents of Tab 1 with Sidebar 1/4</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							
							<div class="mark clean-margin">
								<p class="clean-padding bt-space10"><strong><a href="columns2.html">Codes of Column Styles</a></strong> in Content Box with Sidebars you can find here.</p> 
							</div>
						</div>
					</div>
					</div>
					
					<div id="tab02">
					<div class="sidebar1-3 clear">
						<div class="sidebar">
							<div class="sidemenu">
								<ul class="list">
								<li><a href="#">Lorem Ipsum Dolor</a></li>
								<li><a href="#">Consectetur Adipisicing</a></li>
								<li><a href="#">Dolore Magna</a></li>
								</ul>
							</div>
							<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>						
						</div>
						<div class="col2-3">
							<div class="notification note-info">
								<a href="#" class="close" title="Close notification">close</a>
								<p><strong>Sidebar Information:</strong></p> 
								<p><small>The sidebar can be used as static sidebar without any reactions to tabs. It's up to you what will be included into the div tag that can be changed by tabs.</small></p>
							</div>
							
							<h3>Contents of Tab 1 with Sidebar 1/3</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							
							<div class="mark clean-margin">
								<p class="clean-padding bt-space10"><strong><a href="columns2.html">Codes of Column Styles</a></strong> in Content Box with Sidebars you can find here.</p> 
							</div>
						</div>
					</div>
					</div>
					
					<div id="tab03">
					<div class="sidebar1-2 clear">
						<div class="sidebar">
							<div class="sidemenu">
								<ul class="list">
								<li><a href="#">Lorem ipsum dolor sit amet</a></li>
								<li><a href="#">Consectetur adipisicing elit</a></li>
								<li><a href="#">Tempor incididunt ut labore</a></li>
								<li class="active"><a href="#">Labore et dolore magna</a></li>
								<li><a href="#">Exercitation ullamco</a></li>
								</ul>
							</div>
							<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>
							<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>
						</div>
						<div class="col1-2">
							<div class="notification note-info">
								<a href="#" class="close" title="Close notification">close</a>
								<p><strong>Sidebar Information:</strong></p> 
								<p><small>The sidebar can be used as static sidebar without any reactions to tabs. It's up to you what will be included into the div tag that can be changed by tabs.</small></p>
							</div>
							
							<h3>Contents of Tab 1 with Sidebar 1/2</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							
							<div class="mark clean-margin">
								<p class="clean-padding bt-space10"><strong><a href="columns2.html">Codes of Column Styles</a></strong> in Content Box with Sidebars you can find here.</p> 
							</div>
						</div>
					</div>
					</div>
				</div> <!-- end of box-wrap -->
			</div> <!-- end of box-body -->
			</div> <!-- end of content-box -->
			

		</div><!-- end of page -->
	</div>
</div>

<div class="footer">
	<div class="pagesize clear">
		<p class="bt-space15"><span class="copy"><strong>© 2010 Copyright by <a href="http://www.ait.sk">Affinity Information Technology.</a></strong></span> Powered by <a href="#">TERMINATOR ADMIN.</a></p>
		<img src="public/images/logo_earth_bw50.png" alt="" class="block center" />
	</div>
</div>

<script type="text/javascript" src="public/js/jquery.js"></script>
<script type="text/javascript" src="public/js/jquery.visualize.js"></script>
<script type="text/javascript" src="public/js/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="public/js/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript" src="public/js/jquery.fancybox.js"></script>
<script type="text/javascript" src="public/js/jquery.idtabs.js"></script>
<script type="text/javascript" src="public/js/jquery.datatables.js"></script>
<script type="text/javascript" src="public/js/jquery.jeditable.js"></script>
<script type="text/javascript" src="public/js/jquery.ui.js"></script>
<script type="text/javascript" src="public/js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="public/js/jquery.validate.js"></script>

<script type="text/javascript" src="public/js/excanvas.js"></script>
<script type="text/javascript" src="public/js/cufon.js"></script>
<script type="text/javascript" src="public/js/Zurich_Condensed_Lt_Bd.js"></script>
<script type="text/javascript" src="public/js/script.js"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12958851-8']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>

